<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frozen_pear</title>
    <script src="{{ url_for('static', path='/js/echarts.min.js') }}"></script>
    <style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f0f2f5;
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        font-size: 30px;
    }
    a:hover {
        text-decoration: underline;
    }
    .form-container {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        max-width: 500px;
        margin: 20px auto;
    }
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
    }
    input[type="number"], select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }
    button {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }
    button:hover {
        background-color: #0056b3;
    }
    #result {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        text-align: center;
        margin-top: 20px;
    }
    #main {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin: 0 auto;
    }
    </style>

</head>
<body>
    <a href="/">返回</a>
    <div class="form-container">
        <label for="time">输入时间 (天):</label>
        <input type="number" id="time" step="any">
        <label for="nutrient">选择营养素:</label>
        <select id="nutrient">
            <option value="水分">水分</option>
            <option value="糖分">糖分</option>
            <option value="膳食纤维">膳食纤维</option>
            <!-- Add other nutrients as needed -->
        </select>
        <button onclick="calculatePears()">计算所需梨的数量</button>
    </div>
    <p id="result"></p>
    <div id="main" style="width: 800px; height: 600px;"></div>
    <script>
        function echarts1() {
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '梨的营养成分占比',
                    left: 'center',
                    top: '20px',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: '#333'
                    },
                    subtextStyle: {
                        color: '#777'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#333'
                    }
                },
                series: [
                    {
                        name: '营养成分',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 3, name: "膳食纤维" },
                            { value: 0.4, name: "蛋白质" },
                            { value: 10, name: "糖分" },
                            { value: 0.1, name: "脂肪" },
                            { value: 84, name: "水分" },
                            { value: 0.5, name: "矿物质&维生素" }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = ['#ff9999', '#66b3ff', '#99ff99', '#ffcc99', '#c2c2f0', '#ffb3e6'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut'
                    }
                ]
            };
            myChart.setOption(option);
        }
        echarts1();

        function calculatePears() {
            var time = document.getElementById('time').value;
            var nutrient = document.getElementById('nutrient').value;

            fetch('/calculate_pears', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ time: time, nutrient: nutrient })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerText = `所需梨的数量: ${data.quantity}`;
            });
        }
    </script>
</body>
</html>
